<!--
 * @Author: daidai
 * @Date: 2022-01-12 14:23:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 14:47:24
 * @FilePath: \web-pc\src\pages\big-screen\view\home.vue
-->
<template>
  <el-scrollbar style="height: 920px">
    <ScaleScreen
      :id="fullscreenElementId"
      :width="1920"
      :height="1080"
      class="scale-wrap"
      :selfAdaption="true"
    >
      <div class="bg">
        <div class="host-body">
          <!-- 头部 s -->
          <div class="d-flex jc-center title_wrap">
            <div class="zuojuxing"></div>
            <div class="youjuxing"></div>
            <div class="guang"></div>
            <div class="d-flex jc-center">
              <div class="title">
                <span class="title-text">家庭养老床位数据驾驶舱</span>
              </div>
            </div>
            <div class="timers" style="color: #1cdbfe; padding-right: 20px">
              {{ dateYear }} {{ dateWeek }} {{ dateDay }}
              <span
                style="margin-left: 10px; cursor: pointer"
                @click="toggleFullScreen"
              >
                <svg
                  t="1694677626375"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1711"
                  id="mx_n_1694677626375"
                  width="16"
                  height="16"
                >
                  <path
                    d="M145.066667 85.333333h153.6c25.6 0 42.666667-17.066667 42.666666-42.666666S324.266667 0 298.666667 0H34.133333C25.6 0 17.066667 8.533333 8.533333 17.066667 0 25.6 0 34.133333 0 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666666-42.666666V145.066667l230.4 230.4c17.066667 17.066667 42.666667 17.066667 59.733334 0 17.066667-17.066667 17.066667-42.666667 0-59.733334L145.066667 85.333333z m170.666666 563.2L162.133333 802.133333l-76.8 76.8V725.333333C85.333333 699.733333 68.266667 682.666667 42.666667 682.666667s-42.666667 17.066667-42.666667 42.666666v256c0 25.6 17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666H145.066667l76.8-76.8 153.6-153.6c17.066667-17.066667 17.066667-42.666667 0-59.733334-17.066667-17.066667-42.666667-17.066667-59.733334 0z m665.6 34.133334c-25.6 0-42.666667 17.066667-42.666666 42.666666v153.6l-76.8-76.8-153.6-153.6c-17.066667-17.066667-42.666667-17.066667-59.733334 0-17.066667 17.066667-17.066667 42.666667 0 59.733334l153.6 153.6 76.8 76.8H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666666z m0-682.666667h-256c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h153.6l-76.8 76.8-153.6 153.6c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733334 0l153.6-153.6 76.8-76.8v153.6c0 25.6 17.066667 42.666667 42.666666 42.666666s42.666667-17.066667 42.666667-42.666666v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z"
                    fill="#1CDBFE"
                    p-id="1712"
                  ></path>
                </svg>
              </span>
            </div>
          </div>
          <div style="margin-top: 20px"></div>
          <el-row :gutter="15">
            <el-col :span="6">
              <leftTop :isFullscreen="isFullscreen"></leftTop>
              <left-center
                style="margin-top: 10px"
                :isFullscreen="isFullscreen"
              ></left-center>
              <left-bottom
                style="margin-top: 10px"
                :isFullscreen="isFullscreen"
              ></left-bottom>
            </el-col>
            <el-col :span="12">
              <center-top :isFullscreen="isFullscreen"></center-top>
              <center
                style="margin-top: 10px"
                :isFullscreen="isFullscreen"
              ></center>
              <center-bottom
                style="margin-top: 10px"
                :isFullscreen="isFullscreen"
              ></center-bottom>
            </el-col>
            <el-col :span="6">
              <right-top :isFullscreen="isFullscreen"></right-top>
              <right-center
                style="margin-top: 10px"
                :isFullscreen="isFullscreen"
              ></right-center>
              <right-bottom
                style="margin-top: 10px"
                :isFullscreen="isFullscreen"
              ></right-bottom>
            </el-col>
          </el-row>
          <!-- 头部 e-->
          <!-- 内容  s-->

          <!-- 内容 e -->
        </div>
      </div>
    </ScaleScreen>
  </el-scrollbar>

  <!-- </div> -->
</template>

<script>
import { formatTime } from '@/utils';
import ScaleScreen from '@/components/scale-screen/scale-screen.vue';
import leftTop from '@/views/dataScreen/dataScreenContent/leftTop.vue';
import leftCenter from '@/views/dataScreen/dataScreenContent/leftCenter.vue';
import leftBottom from '@/views/dataScreen/dataScreenContent/leftBottom.vue';
import centerTop from '@/views/dataScreen/dataScreenContent/centerTop.vue';
import center from '@/views/dataScreen/dataScreenContent/center.vue';
import centerBottom from '@/views/dataScreen/dataScreenContent/centerBottom.vue';
import rightTop from '@/views/dataScreen/dataScreenContent/rightTop.vue';
import rightCenter from '@/views/dataScreen/dataScreenContent/rightCenter.vue';
import rightBottom from '@/views/dataScreen/dataScreenContent/rightBottom.vue';

export default {
  components: {
    ScaleScreen,
    leftTop,
    leftCenter,
    leftBottom,
    centerTop,
    center,
    centerBottom,
    rightTop,
    rightCenter,
    rightBottom,
  },
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      fullscreenElementId: 'fullscreenElement',
      isFullscreen: false,
    }
  },
  filters: {
    numsFilter(msg) {
      return msg || 0
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.timeFn()
    this.cancelLoading()
  },
  beforeUnmount() {
    clearInterval(this.timing)
  },
  methods: {
    toggleFullScreen() {
      const element = document.getElementById(this.fullscreenElementId)
      this.isFullscreen = !this.isFullscreen
      if (element) {
        if (
          document.fullscreenElement ||
          document.webkitFullscreenElement ||
          document.mozFullScreenElement ||
          document.msFullscreenElement
        ) {
          // 如果已经处于全屏模式，则退出全屏
          this.exitFullScreen()
        } else {
          // 否则，进入全屏
          this.enterFullScreen(element)
        }
      }
    },
    enterFullScreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    },
    showSetting() {
      // this.$refs.setting.init();
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss');
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading() {
      const timer = setTimeout(() => {
        this.loading = false
        clearTimeout(timer)
      }, 500)
    },
  },
}
</script>

<style lang="scss">
.scale-wrap {
  color: #d3d6dd;
  overflow: hidden;
  margin: 0;

  .bg {
    width: 100%;
    height: 100%;
    padding: 16px 16px 10px 16px;
    box-sizing: border-box;
    background-image: url("../../../assets/img/bg.png");
    background-size: cover;
    background-position: center center;
  }

  .host-body {
    height: 100%;

    .title_wrap {
      height: 60px;
      background-image: url("../../../assets/img/top.png");
      background-size: cover;
      background-position: center center;
      position: relative;
      margin-bottom: 4px;

      .guang {
        position: absolute;
        bottom: -26px;
        background-image: url("../../../assets/img/guang.png");
        background-position: 80px center;
        width: 100%;
        height: 56px;
      }

      .zuojuxing,
      .youjuxing {
        position: absolute;
        top: -2px;
        width: 140px;
        height: 6px;
        background-image: url("../../../assets/img/juxing1.png");
      }

      .zuojuxing {
        left: 11%;
      }

      .youjuxing {
        right: 11%;
        transform: rotate(180deg);
      }

      .timers {
        position: absolute;
        right: 0;
        top: 30px;
        font-size: 18px;
        display: flex;
        align-items: center;

        .blq-icon-shezhi02 {
          cursor: pointer;
        }
      }
    }
    .title {
      position: relative;
      text-align: center;
      background-size: cover;
      color: transparent;
      height: 60px;
      line-height: 46px;

      .title-text {
        background-image: linear-gradient(#bbebf6, #00eaff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-family: dpFont;
        font-size: 56px;
      }
    }
  }
}
</style>
